<template>
  <div>
    
    <div class="goods-list">

      <div class="goods-item" v-for='item in goods' :key='item.id' @click='routeJump(item.id)'>
        <img :src="item.img_url" alt="">
        <h1 class="title">{{item.title}}</h1>
        <div class="info">
          <p class="price">
            <span class="new">￥{{item.sell_price}}</span>
            <span class="old"><del>￥{{item.market_price}}</del></span>
          </p>
          <p class="sell">
            <span>热卖中</span>
            <span>剩余{{item.stock_quantity}}件</span>
          </p>
        </div>
      </div>

      

    </div>

<mt-button type='danger' size='large' @click='loadingmore'>加载更多</mt-button>
  </div>
</template>

<script>
export default{
  data(){
    return{
      pageindex:1,//默认展示第一页的数据
      goods:[]
    }
  },
  created(){
    this.getallgoods()
  },
  methods:{
    getallgoods(){
      this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
        if(result.body.status==0){
          // this.goods=result.body.message每次请求来的数据会覆盖上一次的数据
          this.goods=this.goods.concat(result.body.message)//把原来的this.goods里面的内容和请求来的内容合并
        }
      })
    },
    loadingmore(){
      this.pageindex++
      this.getallgoods()
    },
    routeJump(id){
      //使用方法的形式来进行路由跳转
      //操作地址栏的hash的两种方法
      //1router-link标签，2this.$router通过路由导航对象，不要和this.$route混淆this.$route是路由参数对象
      //console.log(this)查看this.$router
      this.$router.push('/home/goodinfo/'+id)
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 6px;
  .goods-item {
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    margin: 3px 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 100%;
    }
    .title {
      font-size: 14px;
    }

    .info {
      background-color: #eee;
      p{
        margin: 0;
        padding: 5px 0;
      }
      .price {
        .old {
          font-size: 14px;
          font-style: italic;
          margin-left: 10px;
        }
        .new {
          color: red;
          font-weight: bold;
          font-size: 16px;
        }
      }
      .sell {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
      }
    }
  }
}
</style>
